<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Canvas实现各种炫酷的仪表盘动画DEMO演示04</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
	body {
		padding: 0;
		margin: 0;
		background: #fff
		}
		.btn-container{
			padding: 1em 0;
			text-align: center;
		}
	.container{
		width: 700px;
		margin: 50px auto;
	}
</style>
<script src="js/gauge.min.js"></script>
</head>
<body>
<div class="zzsc-container">
	<header class="zzsc-header">
		<div class="zzsc-demo center">
		  <a href="index.html">radial</a>
		  <a href="radial-component.html">radial-component</a>
		  <a href="linear-component.html" class="current">linear-component</a>
		  <a href="issue-63.html">issue-63</a>
		  <a href="async.html">async</a>
		  <a href="scripted.html">scripted</a>
		</div>
	</header>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
	<div class="btn-container">
		<button onclick="animateGauges()">Animate</button>
		<button onclick="stopGaugesAnimation()">Stop animation</button>
	</div>
	<div class="container">
	<canvas data-type="linear-gauge"
				data-width="160"
				data-height="600"
				data-border-radius="20"
				data-borders="true"
				data-bar-stroke-width="20"
				data-minor-ticks="10"
				data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
				data-color-numbers="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
				data-color-major-ticks="red,green,blue,transparent,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc,#ccc"
				data-color-bar-stroke="#444"
				data-value="22.3"
				data-units="°C"
				data-color-value-box-shadow="false"
				data-tick-side="left"
				data-number-side="left"
				data-needle-side="left"
				data-animate-on-init="true"
				data-color-plate="transparent"
		></canvas>

		<canvas data-type="linear-gauge"
				data-width="160"
				data-height="600"
				data-border-radius="20"
				data-borders="0"
				data-bar-stroke-width="0"
				data-minor-ticks="20"
				data-animation-rule="cycle"
				data-animation-duration="1000"
				data-title="Temperature"
				data-units="°C"
				data-color-value-box-shadow="false"
				data-animated-value="true"
		></canvas>

		<canvas data-type="linear-gauge"
				data-width="160"
				data-height="600"
				data-border-radius="0"
				data-borders="0"
				data-bar-begin-circle="25"
				data-minor-ticks="10"
				data-value="36.6"
				data-min-value="35"
				data-max-value="42"
				data-title="°C"
				data-major-ticks="35,36,37,38,39,40,41,42"
				data-ticks-width="18"
				data-ticks-width-minor="7.5"
				data-bar-width="5"
				data-highlights="false"
				data-color-value-box-shadow="false"
				data-value-box-stroke="0"
				data-color-value-box-background="false"
				data-value-int="2"
				data-value-dec="1"
		></canvas>

		<canvas data-type="linear-gauge"
				data-width="160"
				data-height="600"
				data-border-radius="20"
				data-borders="0"
				data-bar-begin-circle="false"
				data-title="Temperature"
				data-units="°C"
				data-minor-ticks="10"
				data-value="99"
				data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
				data-tick-side="right"
				data-number-side="right"
				data-needle-side="right"
				data-animation-rule="bounce"
				data-animation-duration="750"
				data-bar-stroke-width="5"
				data-value-box-border-radius="0"
				data-value-text-shadow="false"
		></canvas>

		<br>

		<canvas data-type="linear-gauge"
				data-width="600"
				data-height="160"
				data-border-radius="0"
				data-borders="0"
				data-bar-begin-circle="false"
				data-title="Temperature"
				data-units="°C"
				data-value="75.5"
				data-bar-stroke-width="5"
				data-highlights='[{"from":50, "to":75, "color": "red"}]'
		></canvas>

		<br>

		<canvas data-type="linear-gauge"
				data-width="600"
				data-height="160"
				data-border-radius="20"
				data-borders="0"
				data-bar-stroke-width="0"
				data-value="66.6"
				data-tick-side="left"
				data-number-side="left"
				data-needle-side="left"
				data-animation-rule="bounce"
				data-animation-duration="750"
				data-title="Temperature"
				data-units="°C"
		></canvas>

		<canvas data-type="linear-gauge"
				data-width="400"
				data-height="150"
				data-min-value="0"
				data-max-value="220"
				data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
				data-minor-ticks="2"
				data-stroke-ticks="true"
				data-highlights='false'
				data-color-plate="#fff"
				data-border-shadow-width="0"
				data-borders="false"
				data-bar-begin-circle="false"
				data-bar-width="10"
				data-tick-side="left"
				data-number-side="left"
				data-needle-side="left"
				data-needle-type="line"
				data-needle-width="3"
				data-color-needle="#222"
				data-color-needle-end="#222"
				data-animation-duration="1500"
				data-animation-rule="linear"
				data-animation-target="plate"
		></canvas>
	</div>
</div>

<script>
if (!Array.prototype.forEach) {
		Array.prototype.forEach = function(cb) {
			var i = 0, s = this.length;
			for (; i < s; i++) {
				cb && cb(this[i], i, this);
			}
		}
	}

	var timers = [];

	function animateGauges() {
		document.gauges.forEach(function(gauge) {
			timers.push(setInterval(function() {
				gauge.value = Math.random() *
					(gauge.options.maxValue - gauge.options.minValue) +
					gauge.options.minValue;
			}, gauge.animation.duration + 500));
		});
	}

	function stopGaugesAnimation() {
		timers.forEach(function(timer) {
			clearInterval(timer);
		});
	}
</script>
</body>
</html>